<template>
	<!-- 积分明细 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="积分明细" />
		<view class="top">
			<input type="text" disabled v-model="selectedTime" placeholder="选择日期查看" @click="show=true" class="selectdate"/>
			<view class="integral">积分收益
				<image src="/static/images/mall/integralicon.png"></image>
				<text>{{totalpoint}}</text>
			</view>
		</view>
		<u-picker v-model="show" mode="time" @confirm="selectTime"></u-picker>
		<noData v-if="recordList.length===0" />
		<view class="record" v-for="(item1,index1) in recordList" :key="index1" v-else>
			<view class="record_top">
				<view class="record_top_desc">{{item1.status | statustext}} 获得</view>
				<view class="record_top_integral">
					<text>+</text>
					<image src="/static/images/mall/integralicon.png"></image>
					<text>{{item1.point}}</text>
				</view>
			</view>
			<view class="record_time">{{item1.create_time}}</view>
		</view>
		<view class="integralbot">
			<view class="integralbot_left">
				<view class="integralbot_left_title">可用积分</view>
				<view class="integralbot_left_text">
					<image src="/static/images/mall/integralicon.png"></image>
					<text>{{point}}</text>
				</view>
			</view>
			<view class="integralbot_right">
				<view class="integralbot_right_text" @click="showExpenditure">支出明细</view>
				<view class="integralbot_right_btn" @click="toUse">去使用</view>
			</view>
		</view>
		<overlay ref="overlay" showSlot>
			<view class="overlaymain">
				<view class="overlaytitle">积分支出记录</view>
				<scroll-view scroll-y="true" style="height: 480rpx;" @scrolltolower="getMypointdrawlis()" upper-threshold="0">
					<view class="overlayitem" v-for="(item2,index2) in drawList" :key="index2">
						<view class="overlayitem_top">
							<view class="overlayitem_top_desc">{{item2.status | statustext}} 支出</view>
							<view class="overlayitem_top_integral">
								<text>-</text>
								<image src="/static/images/mall/integralicon.png"></image>
								<text>{{item2.point}}</text>
							</view>
						</view>
						<view class="overlayitem_time">{{item2.create_time}}</view>
					</view>
				</scroll-view>
				<pullDownRefresh :status="status" v-if="drawList.length>0" />
			</view>
		</overlay>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="recordList.length>0" />
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			overlay,
			pullDownRefresh
		},
		data() {
			return {
				point:'0',//可用积分
				totalpoint:'0',//总积分
				show:false,
				selectedTime:'',
				recordList:[],//积分收入明细
				drawList:[],//积分支出明细
				loading:0,//更多积分明细
				status:0,//更多积分支出记录
				page:1
			}
		},
		filters: {
			statustext(value) {
				switch(parseInt(value)){
					case 1:
						return '购买盲盒'
					case 2:
						return '购买商品'
					case 3:
						return '签到'
					case 4:
						return '使用积分购买商品'
					default:
						break
				}
			}
		},
		onLoad() {
			this.getMypointlis();
		},
		onReachBottom() {
			this.page++;
			this.getMypointlis();
		},
		methods: {
			//获取积分收入明细
			getMypointlis(){
				this.loading = 1;
				this.$api.mypointlis({
					type:1,
					offset:this.page,
					date:this.selectedTime 
				}).then(res=>{
					if(res.point_lis.length>0){
						this.loading = 0;
						this.point = res.my_point;
						this.totalpoint = res.total_point;
						this.recordList = this.recordList.concat(res.point_lis);
					}else{
						this.loading = 3;
						uni.showToast({
							title:'没有更多明细了~',
							icon:'none'
						})
					}
				})
			},
			//获取积分支出明细
			getMypointdrawlis(){
				this.loading = 1;
				this.$api.mypointlis({
					type:2,
					offset:this.page++
				}).then(res=>{
					if(res.point_lis.length>0){
						this.loading = 0;
						this.drawList = this.drawList.concat(res.point_lis);
					}else{
						this.loading = 3;
						uni.showToast({
							title:'没有更多明细了~',
							icon:'none'
						})
					}
				})
			},
			selectTime({day,month,year}) {
				this.selectedTime = year + '-' + month + '-' + day;
				this.page = 1;
				this.recordList = [];
				this.getMypointlis();
			},
			//显示支出明细
			showExpenditure(){
				this.page = 1;
				this.drawList = [];
				this.getMypointdrawlis();
				this.$refs.overlay.show();
			},
			//跳转商城
			toUse(){
				uni.switchTab({
					url:'/pages/mall/mall'
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 100rpx;
}
.top{
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	
	.selectdate{
		width: 360rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 2rpx solid #AAAAAA;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.integral{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		@include align-center;
		
		image{
			width: 34rpx;
			height: 34rpx;
			margin: 0 10rpx 0 34rpx;
		}
		text{
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7000;
		}
	}
}
.record{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 30rpx 26rpx;
	
	&_top{
		@include between;
		
		&_desc{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_integral{
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7000;
			@include align-center;
			
			image{
				width: 34rpx;
				height: 34rpx;
				margin: 0 12rpx 0 10rpx;
			}
		}
	}
	&_time{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 25rpx;
	}
}
.integralbot{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	padding: 15rpx 30rpx;
	@include between;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_left{
		@include between;
		
		&_title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_text{
			@include align-center;
			
			image{
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 17rpx;
			}
			text{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7000;
			}
		}
	}
	&_right{
		@include align-center;
		
		&_text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6408;
		}
		&_btn{
			width: 250rpx;
			height: 70rpx;
			background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 73rpx;
		}
	}
}
.overlaymain{
	width: 530rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 36rpx 18rpx;
	
	.overlaytitle{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.overlayitem{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		margin-bottom: 52rpx;
		position: relative;
		
		&::after{
			content: '';
			width: 494rpx;
			height: 1rpx;
			background: #E5E5E5;
			position: absolute;
			bottom: -26rpx;
		}
		&_top{
			@include between-start;
			
			&_desc{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			&_integral{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7000;
				@include align-center;
				
				image{
					width: 30rpx;
					height: 30rpx;
					margin: 0 12rpx 0 10rpx;
				}
			}
		}
		&_time{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
		}
	}
}
</style>
